<!--  -->
<template>
  <div class="wrap" :loading="loading">
    <div class="lg-title">
      <span>工业监测审计系统</span>
    </div>
    <div class="main">
      <div class="login">
        <div class="login-name">
          <i class="iconfont icon-anquandunpai"></i><span>账号登录</span>
        </div>
        <div class="login-form">
          <el-form :model="loginForm" :rules="rules" ref="loginForm" :show-message = false>
            <el-row :gutter="24">
              <el-col :xs="12" :sm="12" :lg="12">
                <el-form-item prop="username">
                  <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username" placeholder="请输入账号" @keyup.enter.native="loginEnterFun" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="12">
                <el-form-item prop="password">
                  <el-input prefix-icon="el-icon-lock" v-model="loginForm.password" :type="type === true ? 'text':'password'"  placeholder="请输入密码" @keyup.enter.native="loginEnterFun"  show-password></el-input>
                  <i slot="suffix" class="icon-style" :class="elIcon" autocomplete="auto" @click="type = !type"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item class="form-submit">
              <el-button type="primary" class="submit"  @click="login('loginForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-method">
          <p style="font-size:12px;">熊猫出海AI大使管理系统</p>
          <!-- <div class="yuan yuan1"></div>
          <div class="yuan yuan2"></div>
          <div><i class="iconfont icon-zhifubao"></i><span>支付宝</span></div>
          <div><i class="iconfont icon-weixin"></i><span>微信</span></div> -->
        </div>
      </div>
    </div>
    <right-panel>
      <div class="theme">
        <router-link to="/login">主题1</router-link>
        <router-link to="/login2">主题2</router-link>
      </div>
    </right-panel>
  </div>
</template>

<script>
import RightPanel from '@/components/RightPanel'
export default {
  components: {
    RightPanel,
  },
  data() {
    return {
      loading: false,
      type: true,
      loginForm:{
        username:'',
        password:''
      },
      rules:{
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    loginEnterFun(e){
      var keyCode = window.event? e.keyCode:e.which;
      var val = e.target.value;
      if(keyCode == 13 && val){
        this.login('loginForm')
      }
    },
    login(loginForm){
      this.loading = true
      this.$refs[loginForm].validate((valid) => {
        if( valid ){
          this.$store.dispatch('user/login', this.loginForm)
          .then(() => {
            this.$router.push({ path: '/' })
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
        }
        else{
          this.loading = false
          this.$message.error('请输入账号密码')
          return false
        }
      })
    }
  }
};
</script>
<style scoped lang='scss'>
  .theme{
    margin: 20px;
    display: flex;
    flex-direction: column;
    a{
      cursor: pointer;
      padding-bottom: 10px;
      &:hover{
        color: #06b4fd;
      }
    }
  }
  .wrap{
    // position: relative;
    width: 100%;
    height: 100vh;
    min-width: 1000px;
    background: url('../../assets/loginbg.png') #0a2157 center top  no-repeat;
    background-size:cover;
    .lg-title{
      font-size: 45px;
      text-align: center;
      letter-spacing: 11px;
      font-weight: bold;
      color: #fff;
      padding: 70px 0;
      // background: linear-gradient(to right, #1743ff, #00b3ff);
      // background-clip: text;
      // color: transparent;
    }
    .main{
      width: 1100px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      .login{
        color: #fff;
        width: 580px;
        background: rgba(12, 29, 73,.9);
        border: 1px solid #0c8dbb;
        box-shadow: 0 0 10px rgba(255,255,255,.3);
        &-name{
          font-size: 20px;
          text-align: center;
          padding: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          .icon-anquandunpai{
            font-size: 24px;
            padding-right: 10px;
            color: #0cc0f4;
          }
          span{
            line-height: 40px;
            // font-weight: bold;
          }
        }
        &-form{
          border-top: 1px solid #989ba5;
          padding: 30px 45px;
          ::v-deep .el-input{
            margin-bottom: 25px;
            height: 45px;
            line-height: 45px;
            background: #0e1f56;
            border: 2px solid #112971;
            .el-input__inner{
              font-size: 16px;
              text-indent: 16px;
              color: #fff;
              background: none;
              border: none;
            }
            .el-input__inner::placeholder {
              color: #e3e3e3;
              letter-spacing: 4px;
            }
            .el-input__icon{
              font-size: 25px;
              color: #2a4791;
            }
          }
          .form-submit{
            width: 200px;
            margin: 0 auto;
          }
          .submit{
            width: 100%;
            height: 45px;
            font-size: 18px;
            letter-spacing: 10px;
            text-indent: 10px;
            text-align: center;
            background: #284693;
            border: none;
            margin: 25px auto 0px;
            border-radius: 5px;
          }
        }
        &-method{
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 55px;
          font-size: 20px;
          text-align: center;
          background: rgba(11, 28, 74, .8);
          img{
            width: 30px;
            margin-right: 10px;
            // border-radius: 30px;
            // background: rgba(255, 255, 255, .8)
          }
          div{
            cursor: pointer;
            .iconfont{
              position: relative;
              font-size: 20px;
              padding-right: 10px;
              z-index: 2;
            }
            .icon-zhifubao{
              color: #06b4fd;
            }
            .icon-weixin{
              margin-left: 30px;
              color: #28c445;
            }
          }
          .yuan{
            position: absolute;
            width: 19px;
            height: 19px;
            background: #fff;
            border-radius: 50%;
          }
          .yuan1{
            left: 218px;
          }
          .yuan2{
            left: 338px;
          }
        }
      }
    }
  }
</style>

<style>
/* 去掉记住密码填充样式 */
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #0e1f56 inset !important;
    -webkit-text-fill-color: #fff;
}
</style>